<template>
  <div>
    <div
      class="echarts_main"
      :style="{
        width: sendStyle.w,
        height: sendStyle.h,
        backgroundColor: sendStyle.bgc,
      }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    sendStyle: {
      type: Object,
    },
    sendOption: {
      type: Object,
    },
  },
  watch: {
    sendOption: {
      deep: true,
      handler() {
        var myChart = echarts.init(document.querySelector(".echarts_main"));
        myChart.setOption({
          title: {
            text: this.sendOption.title,
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: this.sendOption.legend,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.sendOption.xAxis,
          },
          yAxis: {
            type: "value",
          },
          series: this.sendOption.series,
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.echarts_main {
  border: 1px solid red;
}
</style>